<template>
  <div 
    class="html-sprite" 
    :style="spriteStyle"
    @click="handleClick"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
    v-show="visible"
  >
    <!-- <img :src="texture" :alt="countryName" /> -->
    <div class="sprite-placeholder">
      <span class="country-name">{{ countryName }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import * as THREE from 'three'
// 类型定义
interface Props {
  countryName: string
  position: THREE.Vector3
  texture: string
  screenX: number
  screenY: number
  visible?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  visible: true
})

// 定义事件
const emit = defineEmits<{
  (e: 'click', countryName: string): void
  (e: 'hover', countryName: string, isHover: boolean): void
}>()

// 计算精灵样式
const spriteStyle = computed(() => {
  return {
    left: `${props.screenX}px`,
    top: `${props.screenY}px`,
    transform: 'translate(-50%, -50%)',
    position: 'absolute',
    pointerEvents: 'auto'
  }
})

// 事件处理函数
const handleClick = () => {
  emit('click', props.countryName)
}

const handleMouseEnter = () => {
  emit('hover', props.countryName, true)
}

const handleMouseLeave = () => {
  emit('hover', props.countryName, false)
}
</script>

<style scoped>
.html-sprite {
  position: absolute;
  pointer-events: auto;
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.2s ease;
}

.sprite-placeholder {
  width: 40px;
  height: 40px;
  background-color: red; /* 使用红色作为测试颜色 */
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.country-name {
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}

.html-sprite:hover {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.2);
}
</style>